x<template>
  <div class="menu-list">
    <page-content
      ref="pageContentRef"
      v-bind="menuContentConfig"
      :single-btn-config="singleBtnConfig"
      @singleBtnClick="singleBtnClick"
      @confirmClick="handleConfirmClick"
      @cancelClick="handleCancelClick"
    >
      <template #icon="row">
        <el-icon v-if="row[row.prop]">
          <component :is="row[row.prop]" />
        </el-icon>
      </template>
      <template #parentName="formItem">
        <el-popover placement="bottom" :width="430" trigger="click">
          <template #default>
            <!--            树形结构-->
            <el-tree
              :data="useGlobalStore().entriesMenu"
              node-key="menuId"
              :expand-on-click-node="false"
              :props="defaultProps"
              @node-click="menuClick"
            >
              <template #default="{ node, data }">
                <span>{{ node.label }}</span>
                <span v-if="data.children.length"
                  >({{ data.children.length }})</span
                >
              </template>
            </el-tree>
          </template>
          <template #reference>
            <el-input
              :placeholder="formItem.placeholder"
              v-model="parentName"
              @input="parentNameChange"
            />
          </template>
        </el-popover>
      </template>
    </page-content>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import PageContent from '@/components/page-content/page-content.vue'
import menuContentConfig from '@/views/main/system/menu/config/content-config'
import modalEditAndAddConfig from '@/views/main/system/menu/config/modal-edit-and-add'
import usePageHeader from '@/hooks/use-page-header'
import { SingleBtns } from '@/global/constant'
import type { SingleBtnType } from '@/global/types'
import { useGlobalStore, usePageCommonStore } from '@/store'
import { ElNotification } from 'element-plus'

const defaultProps = {
  children: 'children',
  label: 'menuLabel'
}
// 绑定的上级菜单属性
const parentName = ref('')
// 当前选中的菜单，点击确定的时候要跟这个对象一样
const curMenu = reactive({
  parentId: -1,
  parentName: ''
})
watch(
  () => usePageCommonStore().curRow,
  (newVal) => {
    parentName.value = newVal.parentName
    curMenu.parentName = newVal.parentName
    curMenu.parentId = newVal.parentId
  }
)
const menuClick = (menu) => {
  parentName.value = menu.menuLabel
  curMenu.parentId = menu.menuId
  curMenu.parentName = menu.menuLabel
}
const parentNameChange = () => {
  if (parentName.value !== curMenu.parentName) {
    ElNotification.error('您只能选择下面的菜单~')
    parentName.value = curMenu.parentName
    return
  }
}

// ============================= page-content ================================
const { pageContentRef } = usePageHeader()
const singleBtnConfig = ref()
// 子传父
// 0.点击表单框的确定按钮
const handleConfirmClick = (
  type: SingleBtnType,
  updateInfo: (info) => void
) => {
  singleBtnConfig.value = null
  updateInfo(curMenu)
}

const handleCancelClick = () => {
  singleBtnConfig.value = null
  parentName.value = usePageCommonStore().curRow.parentName
}

// 1.点击单操作按钮
const singleBtnClick = async (type: SingleBtnType) => {
  if (SingleBtns.Add === type || SingleBtns.Edit === type) {
    singleBtnConfig.value = modalEditAndAddConfig
  }
  pageContentRef.value?.setModalStatus(true)
}
</script>

<style scoped lang="less"></style>
